<template>
	<div>
		<el-dialog :title="titlecom" :visible.sync="dialogFormVisible" width="1300px">
			<!-- :rules="rules" -->
			<el-form :model="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="名称" :label-width="formLabelWidth" prop="name">
					<el-input v-model="form.name" style="width: 350px;"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth" prop="title">
					<el-input v-model="form.title" style="width: 350px;"></el-input>
				</el-form-item>
				<el-form-item label="商品价格" :label-width="formLabelWidth" prop="goodprice">
					<el-input v-model="form.goodprice" style="width: 350px;"></el-input>
				</el-form-item>
				<el-form-item label="活动价格" :label-width="formLabelWidth" prop="price">
					<el-input v-model="form.price" style="width: 350px;"></el-input>
				</el-form-item>
				
				<el-form-item label="活动天数" :label-width="formLabelWidth" prop="day">
					<el-input v-model="form.day"  style="width: 350px;"></el-input>
				</el-form-item>
				
							
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="quedingtianjia()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getfangans,
		fanganadd,
		fanganupdate,
		fangandel
	} from "@/api/recommend";
	
	export default {
		
		data() {
			return {
				reqCategory1: [],
				reqCategory2: [{
						id: 1,
						name: "水果文案"
					},
					{
						id: 2,
						name: "营销文案"
					},
				],
				isClear: false,
				dialogVisible: false,
				dialogFormVisible: false,
				formLabelWidth: "180px",
				form: {
					name:'',
					title:'',
					price:'',
					goodprice:'',
					day:''
				},
				dialogVisible1: false,
				dialogVisible2: false,
				dialogVisiblevideo: false,
				rules: {
					copywritingtypeid: [{
						required: true,
						message: "请选择分类",
						trigger: "blur"
					}, ],
					content: [{
						required: true,
						message: "请输入文案内容",
						trigger: "blur"
					}, ],
					images: [{
						required: true,
						message: "请上传图片",
						trigger: "blur",
					}, ],
					shtype: [{
						required: true,
						message: "请选择文案",
						trigger: "blur"
					}],
					video: [{
						required: true,
						message: "请上传视频",
						trigger: "blur"
					}],
				},
				qubie: 0,
			};
		},
		methods: {
		
			async shuiguotj() {
				let result = await shuiguotj();
				if (result.code == 0) {
					this.tableData = result.data;
				}
			},
			// 将富文本获取回来数据上剔除掉html标签
			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ""); //执行替换成空字符
				return msg;
			},
			add() {
				this.form = {
					name:'',
					title:'',
					price:'',
					goodprice:'',
					day:''
				};
				this.qubie = 0;
				this.dialogFormVisible = true;
				this.shuiguotj()
			},
			
			edit(val) {
				console.log("点击了编辑", val);
				this.form = {
					name:'',
					title:'',
					price:'',
					goodprice:'',
					day:''
				};
				this.qubie = 1;
				this.form = Object.assign(this.form, val);
				this.dialogFormVisible = true;
				this.shuiguotj()
			
			},
			// 关闭
			handleClose() {
				this.dialogFormVisible = false;
				this.$emit("refresh");
			},

			async quedingtianjia() {
				if (this.qubie == 0) {
					let param = {
						name:this.form.name,
						title:this.form.title,
						price:parseFloat(this.form.price),
						goodprice:parseFloat(this.form.goodprice),
						day: parseInt(this.form.day)
					};
					console.log(param);
					let result = await fanganadd(param);
					if (result.code == 0) {
						this.$message({
							message: `添加方案成功`,
							type: "success",
						});
						this.handleClose();
					}
				} else if (this.qubie == 1) {
					let param = {
						id:this.form.id,
						name:this.form.name,
						title:this.form.title,
						price:parseFloat(this.form.price),
						goodprice:parseFloat(this.form.goodprice),
						day: parseInt(this.form.day)
					};
					let result = await fanganupdate(param);
					if (result.code == 0) {
						this.$message({
							message: `修改方案成功`,
							type: "success",
						});
						this.handleClose();
					}
				}
			},
		},
		
		computed: {
			titlecom() {
				if (this.qubie == 0) {
					return "添加方案";
				} else {
					return "修改方案";
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.specificationInput {
		width: 250px;
	}

	.avatar-uploader-icon[data-v-22a48a68] {
		border: 1px dashed #d9d9d9;
		width: 300px;
		height: 300px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 300px;
		height: 300px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.addguigeBtn {
		margin-left: 100px;
		margin-bottom: 22px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 180px;
		height: 180px;
		line-height: 180px;
		text-align: center;
	}

	.avatar {
		width: 180px;
		height: 180px;
		display: block;
	}

	v-deep .el-upload--picture-card {
		width: 300px !important;
		height: 300px !important;
	}

	.specificationInput1 {
		width: 150px;
	}
</style>